<template>
	<div class="login-container">

		<el-form :model="ruleForm2" :rules="rules2" status-icon ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-page">
			<img src="../assets/PIGS-LOGO.png" />

			<el-form-item prop="username">
				<el-input type="text" v-model="ruleForm2.username" auto-complete="off" placeholder="用户名"></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="密码"></el-input>
			</el-form-item>

			<el-form-item style="width:100%;">
				<el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				logining: false,
				ruleForm2: {
					username: 'admin',
					password: '123456',
				},
				rules2: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				},
				checked: false
			}
		},
		methods: {
			handleSubmit(event) {
				this.$refs.ruleForm2.validate((valid) => {
					if (valid) {
						this.logining = true;
						this.$axios({
								method: "post",
								url: "http://localhost:81/pgUsers/login", // 接口地址
								data: {
									userName: this.ruleForm2.username, // 传接口参数
									userPassword: this.ruleForm2.password
								}
							})
							.then(response => {
								console.log(response, "success"); // 成功的返回      
							})
							.catch(error => console.log(error, "error")); // 失败的返回
						this.logining = false;
					} else {
						console.log('error submit!');
						return false;
					}
				})
			}
		}
	};
</script>

<style scoped>
	.login-container {
		width: 100%;
		height: 100%;
	}

	.login-page {
		-webkit-border-radius: 5px;
		border-radius: 5px;
		margin: 180px auto;
		width: 350px;
		padding: 35px 35px 15px;
		background: #fff;
		border: 1px solid #eaeaea;
		box-shadow: 0 0 25px #cac6c6;
	}

	label.el-checkbox.rememberme {
		margin: 0px 0px 15px;
		text-align: left;
	}
</style>
